<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
// import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';

defineOptions({
  name: 'GlobalContent'
});

interface Props {
  /** Show padding for content */
  showPadding?: boolean;
}

withDefaults(defineProps<Props>(), {
  showPadding: true
});

const appStore = useAppStore();
// const themeStore = useThemeStore();
const routeStore = useRouteStore();
</script>

<template>
  <RouterView v-slot="{ Component, route }">
    <!-- 导致场景联动切换到其他组件时空白无法跳转,具体原因不清楚 -->
    <!--
 <Transition :name="themeStore.page.animateMode" mode="out-in" @before-leave="appStore.setContentXScrollable(true)"
      @after-enter="appStore.setContentXScrollable(false)">
      <KeepAlive :include="routeStore.cacheRoutes">
        <component :is="Component" v-if="appStore.reloadFlag" :key="route.path" :class="{ 'p-16px': showPadding }"
          class="flex-grow bg-layout transition-300" />
      </KeepAlive>
    </Transition>
-->
    <KeepAlive :include="routeStore.cacheRoutes">
      <component
        :is="Component"
        v-if="appStore.reloadFlag"
        :key="route.path"
        :class="{ 'p-16px': showPadding }"
        class="flex-grow bg-layout transition-300"
      />
    </KeepAlive>
  </RouterView>
</template>

<style></style>
